/**
 * 1.让所有动画元素暂停
 * 2.监听滚动条
 * 3.滚动条滚动到动画元素的位置，让元素动起来
 */
/**
 * 
 * @param {object} el 传入一个元素，让这个元素动画开始 
 */
//动画开始时，元素底部和页面底部的距离
let runDistance = 200
function run(el){
    el.classList.add('animate_run')
}
// 一个动画元素
// const textEle = document.getElementById('text')

// window.onscroll = function(){
//    let x =  innerHeight - (textEle.offsetTop - scrollY) - textEle.offsetHeight 
//    if(x >= runDistance){
//     run(textEle)
//    }
// // this.console.log(scrollY)
// }
//找到所有动画懒加载元素
const allAnimateEles = document.querySelectorAll('.lazy-animate')
window.onscroll = function(){
    allAnimateEles.forEach(function(ele){
        // let x =  innerHeight - (ele.offsetTop - scrollY) - ele.offsetHeight 
        let x = innerHeight - (ele.offsetTop - ele.offsetHeight)-scrollY
        
           if(x >= runDistance){
            run(ele)
           }
    })
}